import { useEffect, useState } from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Checkbox, Select } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './StatusPage.css';

const STATUS_LIST = ['非常忙', '忙', '正常', '不饱满']

const { Option } = Select;

const StatusPage = ({ dispatch, username, status }) => {

  const [statusItem, setStatusItem] = useState(2);

  useEffect(() => {
    dispatch({
      type: 'status/getStatus'
    });
    setStatusItem(status);
  })

  const onFinish = ({ status }) => {
    dispatch({
      type: 'status/setStatus',
      status
    });
  };

  return (
    <Form
      name="normal_login"
      className="login-form"
      initialValues={{
        username: "",
        statusItem: 2
      }}
      onFinish={onFinish}>
      <Form.Item>
        <span className="ant-form-text">姓名：</span>
        <span className="ant-form-text">{username}</span>
      </Form.Item>
      <Form.Item
        name="status"
        label="状态">
        <Select defaultValue={statusItem} style={{ width: 200 }} value={statusItem}>
          {STATUS_LIST.map((item, index) => {
            return <Option key={index} value={index}>{item}</Option>
          })}
        </Select>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" className="login-form-button">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default connect(state => {
  const { username } = state.users;
  const { status } = state.status;
  return {
    username,
    status
  }
})(StatusPage);
